<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/css/bootstrap/bootstrap.min.css">
    <script src="/js/bootstrap.min.js"></script>
    <script src="/js/jquery.js"></script>
    <style>
        * {
            list-style-type: none;
            padding: 0;
            margin: 0;
        }
        @font-face{
            font-family: QS-R;
            src:url(/font/Quicksand-Regular.ttf);
        }
        @font-face{
            font-family: QS-M;
            src:url(/font/Quicksand-Medium.ttf);
        }
        .nav .nav-content {
            width: 700px;
            margin: 0 auto;
            display:flex;
            align-items:center;
            justify-content :space-between;
        }
        .nav .nav-content h1{
            font-family: QS-R;
            text-align:right;
        }
        .nav .wel-content div {
            font-size: 32px;
            font-family: QS-R;
            font-weight: 900;
            text-align: right;
        }
    </style>
    <style>
        .split-line {
            width:700px;
            margin: 0 auto;
            display:flex;
            align-items:center;
            justify-content :space-between;
        }
        .dot {
            font-size:0;
            border-radius: 50%;
            border: 5px solid black;
        }
    </style>
    <style>
        .clearfix::after {
            content:"";
            display: block;
            height:0;
            clear: both;
        }

        .main {
            width:700px;
            margin: 50px auto 0;
            padding: 0 58px;
            font-family: QS-R;
            font-size:18px;
            font-weight: 600;
        }
        .main .content {
            float:left;
            font-family: QS-R;
            font-size:20px;
            font-weight:bold;
        }


        .main .func-bar .content span {
            margin: 0 8px;
            color: #1b6d85;
            top:1px
        }



        .main .right-content .topic-container .topic-title span {
            margin: 0 8px;
            color: #1b6d85;
            top:5px
        }

        .main .btn-bar .btn-style {
            width:140px;
            font-family: QS-R;
            font-size: 14px;
            text-align: center;
            background-color:mediumblue;
            color:white;
            border-radius: 5px;
            display:inline-block;
        }
        .main .detail {
            border:6px solid #004add;

        }
        .main .mg {
            margin-bottom: 22px;
        }
        .main .func-bar .func-type {
            width:170px;
            margin-right: 14px;
        }
        .main .func-bar .func-title {
            width:400px;

        }
        .main .btn-bar {
            margin-left: 298px;
        }
        .disabled-style {
            color:darkgray;
        }



    </style>
    <style>
        .main .type-list {
            border: 6px solid #004add;
            border-top: 1px solid #004add;
            width: 170px;
            left: -6px;
            top: 42px;
            opacity: 1;
            background-color: white;
            position: absolute;
        }
        .main .topicItem-list {
            border: 6px solid #004add;
            border-top: 1px solid #004add;
            width: 400px;
            left: -6px;
            top: 42px;
            opacity: 1;
            background-color: white;
            position: absolute;
        }
        #type-select:hover{
            cursor: pointer;
        }

        .main .detail .title {
            height: 40px;
            border: 1px #ccc;
            border-radius: 0;
        }

        .main .detail .info {

            border: 1px #ccc;
            border-radius: 0;
        }
        .main .detail .file{
            position: absolute;
            top: 0px;
            opacity: 0;
        }
        .main .detail .file:hover{
            cursor: pointer;
        }

        .type-item:hover{
            cursor: pointer;
            background-color: darkturquoise;
        }

        .main .due-bar {
            margin-bottom:10px;
        }

        .clearfix::after {
            content:"";
            display: block;
            height:0;
            clear: both;
        }

        .main .due-bar .due-title{
            margin-right:17px;
        }
        .main .due-bar .due-item {
            float: left;

        }

        .main .due-bar .due-style {
            background-color:lightgray;
            margin-right: 10px;
            border-radius:4px;

            width:95px;
        }
        .input-style {
            background-color: lightgray;
            height: 24px;

        }
    </style>
</head>
<body>
    <div class="nav">
        <div class="nav-content">
            <div class="logo"><img src="/image/LOGO.png"  style="width:222px;height:114px;"></div>
            <div class="wel-content">
                <div>Welcome!</div>
                <div th:text="|${courseId} G${courseGroup}|">SSK3313 G4</div>
            </div>
        </div>
    </div>
    <div class="split-line">
        <span class="dot"></span><span class="dot"></span><span class="dot"></span><span class="dot"></span><span
            class="dot"></span><span class="dot"></span><span class="dot"></span><span class="dot"></span><span
            class="dot"></span><span class="dot"></span><span class="dot"></span><span class="dot"></span><span
            class="dot"></span><span class="dot"></span><span class="dot"></span><span class="dot"></span><span
            class="dot"></span><span class="dot"></span><span class="dot"></span><span class="dot"></span><span
            class="dot"></span><span class="dot"></span><span class="dot"></span><span class="dot"></span><span
            class="dot"></span><span class="dot"></span><span class="dot"></span><span class="dot"></span><span
            class="dot"></span><span class="dot"></span>
    </div>
    <div class="main">

            <div class="mg func-bar clearfix">
                <div class="detail content func-type" style="position: relative">
                    <div id="type-select" class="type-title"><span id="type-icon" class="glyphicon glyphicon-play"></span>Message</div>
                    <div id="type-list" class="type-list" style="display: none">
                        <div class="type-item"><span>Message</span></div>
                        <div class="type-item"><span>Task</span></div>
                        <div class="type-item"><span>Material</span></div>
                        <div class="type-item"><span>Video</span></div>
                        <div class="type-item"><span>Test</span></div>
                        <div class="type-item"><span>Other</span></div>
                    </div>
                </div>


                <div class="detail content func-title"  style="position: relative">

                    <div id="topicitem-select" class="type-title" >
                        <span id="topicitem-icon" class="glyphicon glyphicon-play"></span>[[${currentTopic.topicName}]]
                    </div>
                    <div id="topicItem-list" class="topicItem-list" style="display: none">
                        <div class="topicItem-item" th:each="topic:${topics}">
                            <span th:text="${topic.topicName}" th:id="${topic.topicId}"></span>
                        </div>

                    </div>
                </div>
            </div>
            <div class="mg detail msg-title">
                <input type="hidden" id="itemType" name="itemType" value="MESSAGE">
                <input type="hidden" id="topicId" name="topicId" th:value="${currentTopic.topicId}">
                <input type="hidden" id="topicName" name="topicId" th:value="${currentTopic.topicName}">
                <input type="text" id="itemTitle" class="form-control title"placeholder="">

            </div>
            <div class="mg detail msg-content">
                <textarea name="topicInfo" id="itemInfo" class="form-control info" rows="5"></textarea>
            </div>
            <div class="mg detail add-topic" style="position: relative">
                <span class="glyphicon glyphicon-plus" style="color: #004add;margin: 0 5px"></span>
                <span id="fileName" class="disabled-style">Uplodate attachrpent here</span>
                <input type="file" name="file"  class="form-control file" id="exampleInputFile" placeholder="Uplodate attachrpent here">
            </div>


        <div class="task-due-bar" style="display: none">
                <div class="due-bar clearfix">
                    <div class="due-item due-title">
                        <span>Due:</span>
                    </div>
                    <div class="due-item due-year due-style">
                        <input type="text" id="due-year" class="form-control input-style" placeholder="year">
                    </div>
                    <div class="due-item due-month due-style">
                        <input type="text" id="due-month" class="form-control input-style" placeholder="month">
                    </div>
                    <div class="due-item due-day due-style">
                        <input type="text" id="due-day" class="form-control input-style" placeholder="day">
                    </div>
                    <div class="due-item due-hour due-style">
                        <input type="text" id="due-hour" class="form-control input-style" placeholder="hour">
                    </div>
                    <div class="due-item due-min due-style">
                        <!--                <span class="glyphicon glyphicon-triangle-bottom"></span>-->
                        <!--                <span id="due-min">Min</span>-->
                        <input type="text" id="due-min" class="form-control input-style" placeholder="min">
                    </div>

                </div>
            </div>

            <div class="test-due-bar" style="display: none">
                <div class="due-bar clearfix">
                    <div class="due-item due-title" style="margin-right: 6px">
                        <span>From:</span>
                    </div>
                    <div class="due-item due-year due-style">
                        <input type="text" id="from-year" class="form-control input-style" placeholder="year">
                    </div>
                    <div class="due-item due-month due-style">
                        <input type="text" id="from-month" class="form-control input-style" placeholder="month">
                    </div>
                    <div class="due-item due-day due-style">
                        <input type="text" id="from-day" class="form-control input-style" placeholder="day">
                    </div>
                    <div class="due-item due-hour due-style">
                        <input type="text" id="from-hour" class="form-control input-style" placeholder="hour">
                    </div>
                    <div class="due-item due-min due-style">
                        <input type="text" id="from-min" class="form-control input-style" placeholder="min">
                    </div>

                </div>
                <div class="due-bar clearfix">
                    <div class="due-item due-title" style="margin-right: 30px;">
                        <span>To:</span>
                    </div>
                    <div class="due-item due-year due-style">
                        <input type="text" id="to-year" class="form-control input-style" placeholder="year">
                    </div>
                    <div class="due-item due-month due-style">
                        <input type="text" id="to-month" class="form-control input-style" placeholder="month">
                    </div>
                    <div class="due-item due-day due-style">
                        <input type="text" id="to-day" class="form-control input-style" placeholder="day">
                    </div>
                    <div class="due-item due-hour due-style">
                        <input type="text" id="to-hour" class="form-control input-style" placeholder="hour">
                    </div>
                    <div class="due-item due-min due-style">
                        <input type="text" id="to-min" class="form-control input-style" placeholder="min">
                    </div>

                </div>
            </div>


            <div class="btn-bar">
                <div id="back" class="btn back btn-style">Back</div>
                <div id="upload" class="btn update btn-style">Upload</div>
            </div>

    </div>
    <script >
        $("#type-select").click(function () {
            let cls = $("#type-icon").attr("class");
            if (cls==="glyphicon glyphicon-triangle-bottom"){
                $("#type-icon").attr("class","glyphicon glyphicon-triangle-right")
                document.getElementById("type-list").style.display="none";
            }else {
                $("#type-icon").attr("class","glyphicon glyphicon-triangle-bottom")
                document.getElementById("type-list").style.display="block";
            }
        })

        $("#topicitem-select").click(function () {
            let cls = $("#topicitem-icon").attr("class");
            if (cls==="glyphicon glyphicon-triangle-bottom"){
                $("#topicitem-icon").attr("class","glyphicon glyphicon-triangle-right")
                document.getElementById("topicItem-list").style.display="none";
            }else {
                $("#topicitem-icon").attr("class","glyphicon glyphicon-triangle-bottom")
                document.getElementById("topicItem-list").style.display="block";
            }
        })
        $("#exampleInputFile").change(function () {
            $("#fileName").html($("#exampleInputFile")[0].files[0].name)
        })
        $("#upload").click(function () {
            let formData = new FormData();
            formData.append("itemType",$("#itemType").val());
            formData.append("topicId",$("#topicId").val());
            formData.append("topicName",$("#topicName").val());
            formData.append("itemTitle",$("#itemTitle").val());
            formData.append("itemInfo",$("#itemInfo").val());
            if ($("#exampleInputFile")[0].files[0]){
                formData.append("attachment",$("#fileName").html());
            }
            formData.append("file",$("#exampleInputFile")[0].files[0]);
            if ($("#itemType").val()==="TEST"){
                let year = document.getElementById("from-year").value;
                let month = document.getElementById("from-month").value;
                let day = document.getElementById("from-day").value;
                let hour = document.getElementById("from-hour").value;
                let min = document.getElementById("from-min").value;
                let from = `${year}-${month}-${day} ${hour}:${min}`


                year = document.getElementById("to-year").value;
                month = document.getElementById("to-month").value;
                day = document.getElementById("to-day").value;
                hour = document.getElementById("to-hour").value;
                min = document.getElementById("to-min").value;

                let to = `${year}-${month}-${day} ${hour}:${min}`
                formData.append("itemFrom",from);
                formData.append("itemTo",to);
            }else if ($("#itemType").val()==="TASK") {
                let year = document.getElementById("due-year").value;
                let month = document.getElementById("due-month").value;
                let day = document.getElementById("due-day").value;
                let hour = document.getElementById("due-hour").value;
                let min = document.getElementById("due-min").value;
                let due = `${year}-${month}-${day} ${hour}:${min}`
                formData.append("itemDue",due);
            }
            $.ajax({
                url:"/course/doCreateCourseTopicItem",
                method:"POST",
                data:formData,
                contentType:false,
                processData: false,
                success:function (data) {
                    if (data.code===true){
                        // $("#back").click()
                        alert("create success!")
                    }else {
                        alert(data.errMsg);
                    }
                }
            })
        })

        $(".type-item").click(function (event) {
            let selectType = $(event.currentTarget).children().html().toUpperCase();
            if (selectType==="TASK"){
                $(".test-due-bar").hide()
                $(".task-due-bar").show()
            }else if (selectType==="TEST"){
                $(".test-due-bar").show()
                $(".task-due-bar").hide()
            }else{
                $(".task-due-bar").hide()
                $(".test-due-bar").hide()
            }

            $("#type-select").html('<span id="type-icon" class="glyphicon glyphicon-play"></span>'+$(event.currentTarget).children().html())
            $("#itemType").val(selectType);
            $("#type-list").hide()


        })


    </script>

    <script th:inline="javascript">
        $("#back").click(function () {
            document.location = "/course/createCourseTopic/"+[[${uniId}]]+"/"+[[${courseId}]]+"/"+[[${courseGroup}]]
        })
    </script>
</body>
</html>